<template>
	<div class="tab-wrapper">
      <div 
        v-for="tab in tabs" 
        :key="tab" 
        class="tab"
        :class="{selected: currentTab === tab}" 
        @click="onTab($event, tab)"
      >
        {{ tab }}
        <div class="selected-round" v-if="currentTab === tab"/>        
      </div>
    </div>
</template>
<script>
export default {
  props:{
    tab: {
      type: String,
      default: '景点门票'
    }
  },
  watch:{
    tab(val) {
      this.currentTab = val
    }
  },
	data(){
		return{
			tabs: ['景点门票', '旅游线路'],
			currentTab: '景点门票',
		}
	},
	methods: {
		onTab(ev, tab) {
			this.currentTab = tab
			this.$emit('change', tab)
		},		
	}	
}
</script>
<style lang="less">

.tab-wrapper {
  padding: 0 0 30rpx;
  display: flex;
  align-items: flex-end;

  .tab {
    position: relative; 
    // margin-right: 40rpx;
    margin-right: 30rpx;
    left: 0;
    top: 0;
    // font-size: 28rpx;
    font-size: 32rpx;
    color: @font_color;
    transform:  perspective(1px) scale3D(0.9, 0.9, 0.9);
    transition: all 0.3s;
    backface-visibility: hidden;

    &.selected {
      font-weight: 600;
      // font-size: 32rpx;
      transform:  perspective(1px) scale3D(1, 1, 1);

    }

    .selected-round {
      width: 24rpx;
      height: 24rpx;
      background: linear-gradient(45deg, rgba(0, 203, 214, 0) 0%, #00CBD6 100%);
      position: absolute;
      right: -12rpx;
      top: -6rpx;
      z-index: 1;
      border-radius: 100%;
      animation: fadeIn 0.3s;
    }
  }

}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>


